<template>
  <div>
    <div id='map'></div>

  </div>
</template>


<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'map-position',
  data() {
    return {
      map: undefined,
      marker: undefined,
      line: []
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      let map = new AMap.Map('map', {
        zoom: 10,//级别
        center: [116.397428, 39.90923],//中心点坐标
        viewMode: '2D'//使用3D视图
      })

      // 工具条控件;范围选择控件
      map.plugin(['AMap.ToolBar'], function() {
        map.addControl(new AMap.ToolBar())
      })

      // 比例尺条控件
      map.plugin(['AMap.Scale'], function() {
        map.addControl(new AMap.Scale())
      })

      //定位当前位置插件； 用来获取和展示用户主机所在的经纬度位置；
      map.plugin(['AMap.Geolocation'], function() {
        map.addControl(new AMap.Geolocation())
      })

      //鹰眼插件；在地图右下角显示地图的缩略图
      map.plugin(['AMap.OverView'], function() {
        map.addControl(new AMap.OverView())
      })

      //实现默认图层与卫星图、实施交通图层之间切换的控件
      map.plugin(['AMap.MapType'], function() {
        map.addControl(new AMap.MapType())
      })

      this.map = map
    }
  }
}
</script>

<style scoped>
#map {
  width: 90%;
  height: 500px;
  margin: auto;
}

.el-button {
  margin-top: 10px;
}
</style>